---
title: "Textarea"
description: "Textarea component is a multi-line Input which allows you to write large texts."
---

import {textareaContent} from "@/content/components/textarea";

# Textarea

Textarea component is a multi-line Input which allows you to write large texts.

<ComponentLinks component="input" storybook="textarea" reactAriaHook="useTextField" />

---

<CarbonAd/>

## Installation

<PackageManagers
  showGlobalInstallWarning
  commands={{
    cli: "npx heroui-cli@latest add input",
    npm: "npm install @heroui/input",
    yarn: "yarn add @heroui/input",
    pnpm: "pnpm add @heroui/input",
    bun: "bun add @heroui/input",
  }}
/>

## Import

<ImportTabs
  commands={{
    main: 'import {Textarea} from "@heroui/react";',
    individual: 'import {Textarea} from "@heroui/input";',
  }}
/>

## Usage

<CodeDemo title="Usage" files={textareaContent.usage} />

### Disabled

<CodeDemo title="Disabled" files={textareaContent.disabled} />

### Read Only

<CodeDemo title="Readonly" files={textareaContent.readonly} />

### Required

If you pass the `isRequired` property to the input, it will have a `danger` asterisk at
the end of the label and the textarea will be required.

<CodeDemo title="Required" files={textareaContent.required} />

### Clear Button

If you pass the `isClearable` property to the textarea, it will have a clear button at the
end of the textarea, it will be visible when the textarea has a value.

<CodeDemo title="Clear Button" files={textareaContent.clearButton} />

### Autosize

Textarea grows automatically based on the content, but you can also set a min and max height to
it using the `minRows` and `maxRows` properties. It is based on [react-textarea-autosize](https://github.com/Andarist/react-textarea-autosize).

<CodeDemo title="Autosize" files={textareaContent.autosize} />

### Without Autosize

In case you want to disable the autosize feature, you can use the `disableAutosize` property.

<CodeDemo title="Without Autosize" files={textareaContent.disableAutosize} />

### Variants

<CodeDemo title="Variants" files={textareaContent.variants} />

### With Error Message

You can combine the `isInvalid` and `errorMessage` properties to show an invalid textarea.

<CodeDemo title="With Error Message" files={textareaContent.errorMessage} />

### Description

<CodeDemo title="Description" files={textareaContent.description} />

### Controlled

You can use the `value` and `onValueChange` properties to control the input value.

<CodeDemo title="Controlled" files={textareaContent.controlled} />

> **Note**: HeroUI `Textarea` also supports native events like `onChange`, useful for form libraries
> such as [Formik](https://formik.org/) and [React Hook Form](https://react-hook-form.com/).


## Slots

- **base**: Input wrapper, it handles alignment, placement, and general appearance.
- **label**: Label of the textarea, it is the one that is displayed above, inside or left of the textarea.
- **inputWrapper**: Wraps the `label` (when it is inside) and the `innerWrapper`.
- **input**: The textarea input element.
- **description**: The description of the textarea.
- **errorMessage**: The error message of the textarea.
- **headerWrapper**: Wraps the `label` and the `clearButton`.

<Spacer y={4} />

## Data Attributes

`Textarea` has the following attributes on the `base` element:

- **data-invalid**:
  When the textarea is invalid. Based on `isInvalid` prop.
- **data-required**:
  When the textarea is required. Based on `isRequired` prop.
- **data-readonly**:
  When the textarea is readonly. Based on `isReadOnly` prop.
- **data-hover**:
  When the textarea is being hovered. Based on [useHover](https://react-spectrum.adobe.com/react-aria/useHover.html)
- **data-focus**:
  When the textarea is being focused. Based on [useFocusRing](https://react-spectrum.adobe.com/react-aria/useFocusRing.html).
- **data-focus-visible**:
  When the textarea is being focused with the keyboard. Based on [useFocusRing](https://react-spectrum.adobe.com/react-aria/useFocusRing.html).
- **data-disabled**:
  When the textarea is disabled. Based on `isDisabled` prop.

<Spacer y={4} />

## Accessibility

- Built with a native `<input>` element.
- Visual and ARIA labeling support.
- Change, clipboard, composition, selection, and input event support.
- Required and invalid states exposed to assistive technology via ARIA.
- Support for description and error message help text linked to the input via ARIA.

<Spacer y={4} />

## API

### Textarea Props

<APITable
  data={[
    {
      attribute: "children",
      type: "ReactNode",
      description: "The content of the textarea.",
      default: "-"
    },
    {
      attribute: "minRows",
      type: "number",
      description: "The minimum number of rows to display.",
      default: "3"
    },
    {
      attribute: "maxRows",
      type: "number", 
      description: "Maximum number of rows up to which the textarea can grow.",
      default: "8"
    },
    {
      attribute: "cacheMeasurements",
      type: "boolean",
      description: "Reuse previously computed measurements when computing height of textarea.",
      default: "false"
    },
    {
      attribute: "variant",
      type: "flat | bordered | faded | underlined",
      description: "The variant of the textarea.",
      default: "flat"
    },
    {
      attribute: "color",
      type: "default | primary | secondary | success | warning | danger",
      description: "The color of the textarea.",
      default: "default"
    },
    {
      attribute: "size",
      type: "sm | md | lg",
      description: "The size of the textarea.",
      default: "md"
    },
    {
      attribute: "radius",
      type: "none | sm | md | lg | full",
      description: "The radius of the textarea.",
      default: "-"
    },
    {
      attribute: "label",
      type: "ReactNode",
      description: "The content to display as the label.",
      default: "-"
    },
    {
      attribute: "value",
      type: "string",
      description: "The current value of the textarea (controlled).",
      default: "-"
    },
    {
      attribute: "defaultValue",
      type: "string",
      description: "The default value of the textarea (uncontrolled).",
      default: "-"
    },
    {
      attribute: "placeholder",
      type: "string",
      description: "The placeholder of the textarea.",
      default: "-"
    },
    {
      attribute: "startContent",
      type: "ReactNode",
      description: "Element to be rendered in the left side of the input.",
      default: "-"
    },
    {
      attribute: "endContent",
      type: "ReactNode",
      description: "Element to be rendered in the right side of the input.",
      default: "-"
    },
    {
      attribute: "description",
      type: "ReactNode",
      description: "A description for the textarea. Provides a hint such as specific requirements for what to choose.",
      default: "-"
    },
    {
      attribute: "errorMessage",
      type: "ReactNode | ((v: ValidationResult) => ReactNode)",
      description: "An error message for the textarea.",
      default: "-"
    },
    {
      attribute: "validate",
      type: "(value: string) => ValidationError | true | null | undefined",
      description: "Validate input values when committing (e.g. on blur), returning error messages for invalid values.",
      default: "-"
    },
    {
      attribute: "validationBehavior",
      type: "native | aria",
      description: "Whether to use native HTML form validation or ARIA validation. When wrapped in a Form component, the default is `aria`. Otherwise, the default is `native`.",
      default: "native"
    },
    {
      attribute: "labelPlacement",
      type: "inside | outside | outside-left",
      description: "The position of the label.",
      default: "inside"
    },
    {
      attribute: "fullWidth",
      type: "boolean",
      description: "Whether the textarea should take up the width of its parent.",
      default: "true"
    },
    {
      attribute: "isRequired",
      type: "boolean",
      description: "Whether user input is required on the textarea before form submission.",
      default: "false"
    },
    {
      attribute: "isReadOnly",
      type: "boolean",
      description: "Whether the textarea can be selected but not changed by the user.",
      default: "-"
    },
    {
      attribute: "isDisabled",
      type: "boolean",
      description: "Whether the textarea is disabled.",
      default: "false"
    },
    {
      attribute: "isClearable",
      type: "boolean",
      description: "Whether the textarea should have a clear button.",
      default: "false"
    },
    {
      attribute: "isInvalid",
      type: "boolean",
      description: "Whether the textarea is invalid.",
      default: "false"
    },
    {
      attribute: "validationState",
      type: "valid | invalid",
      description: "Whether the textarea should display its \"valid\" or \"invalid\" visual styling. (Deprecated) use isInvalid instead.",
      default: "-"
    },
    {
      attribute: "disableAutosize",
      type: "boolean",
      description: "Whether the textarea auto vertically resize should be disabled.",
      default: "false"
    },
    {
      attribute: "disableAnimation",
      type: "boolean",
      description: "Whether the textarea should be animated.",
      default: "false"
    },
    {
      attribute: "classNames",
      type: "Partial<Record<\"base\" | \"label\" | \"inputWrapper\" | \"innerWrapper\" | \"input\" | \"description\" | \"errorMessage\", string>>",
      description: "Allows to set custom class names for the checkbox slots.",
      default: "-"
    }
  ]}
/>

### Input Events

<APITable
  data={[
    {
      attribute: "onChange",
      type: "React.ChangeEvent<HTMLInputElement>",
      description: "Handler that is called when the element's value changes. You can pull out the new value by accessing event.target.value (string).",
      default: "-"
    },
    {
      attribute: "onValueChange",
      type: "(value: string) => void",
      description: "Handler that is called when the element's value changes.",
      default: "-"
    },
    {
      attribute: "onClear",
      type: "() => void",
      description: "Handler that is called when the clear button is clicked.",
      default: "-"
    },
    {
      attribute: "onHeightChange",
      type: "(height: number, meta: { rowHeight: number }) => void",
      description: "Handler that is called when the height of the textarea changes.",
      default: "-"
    }
  ]}
/>
